<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>课程简介 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/69.f5f39d50.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Javascipt</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/js/01-认识javaScript.html" class="sidebar-link">01-认识javaScript</a></li><li><a href="/./guide/notes/js/02-变量与数据类型介绍.html" class="sidebar-link">02-变量与数据类型介绍</a></li><li><a href="/./guide/notes/js/03-基础dom操作.html" class="sidebar-link">03-基础dom操作</a></li><li><a href="/./guide/notes/js/04-表达式和操作符.html" class="sidebar-link">04-表达式和操作符</a></li><li><a href="/./guide/notes/js/05-判断.html" class="sidebar-link">05-判断</a></li><li><a href="/./guide/notes/js/06-循环.html" class="sidebar-link">06-循环</a></li><li><a href="/./guide/notes/js/07-算法拓展.html" class="sidebar-link">07-算法拓展</a></li><li><a href="/./guide/notes/js/08-函数.html" class="sidebar-link">08-函数</a></li><li><a href="/./guide/notes/js/09-作用域,闭包,预解析.html" class="sidebar-link">09-作用域,闭包,预解析</a></li><li><a href="/./guide/notes/js/10-数组.html" class="sidebar-link">10-数组</a></li><li><a href="/./guide/notes/js/11-字符串.html" class="sidebar-link">11-字符串</a></li><li><a href="/./guide/notes/js/12-类型转换.html" class="sidebar-link">12-类型转换</a></li><li><a href="/./guide/notes/js/13-DOM进阶.html" class="sidebar-link">13-DOM进阶</a></li><li><a href="/./guide/notes/js/14-dom事件与机制.html" class="sidebar-link">14-dom事件与机制</a></li><li><a href="/./guide/notes/js/15-浏览器M操作.html" class="sidebar-link">15-浏览器M操作</a></li><li><a href="/./guide/notes/js/16-toProject.html" class="sidebar-link">16-toProject</a></li><li><a href="/./guide/notes/js/17-内置数学和时间project.html" class="sidebar-link">17-内置数学和时间project</a></li><li><a href="/./guide/notes/js/18-各种距离宽高获取.html" class="sidebar-link">18-各种距离宽高获取</a></li><li><a href="/./guide/notes/js/19-正则表达式.html" class="sidebar-link">19-正则表达式</a></li><li><a href="/./guide/notes/js/21-箭头函数.html" class="sidebar-link">20箭头函数</a></li><li><a href="/./guide/notes/js/22-解构赋值.html" class="sidebar-link">21-解构赋值</a></li><li><a href="/./guide/notes/js/23-project字面量增强和函数默认参数.html" class="sidebar-link">22-project字面量增强和函数默认参数</a></li><li><a href="/./guide/notes/js/24-剩余参数和展开运算符.html" class="sidebar-link">23-剩余参数和展开运算符</a></li><li><a href="/./guide/notes/js/25-Set 和 Map数据结构和Symbol.html" class="sidebar-link">24-Set 和 Map数据结构和Symbol</a></li><li><a href="/./guide/notes/js/26-遍历器和for-of循环.html" class="sidebar-link">25-遍历器和for-of循环</a></li><li><a href="/./guide/notes/js/27-Promise.html" class="sidebar-link">26-Promise</a></li><li><a href="/./guide/notes/js/28-Clsss类.html" class="sidebar-link">27-Clsss类</a></li><li><a href="/./guide/notes/js/29-module模块.html" class="sidebar-link">28-module模块</a></li><li><a href="/./guide/notes/js/30-Babel.html" class="sidebar-link">29-Babel</a></li><li><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html" class="active sidebar-link">30-前后端通信和HTTP协议</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#课程简介" class="sidebar-link">课程简介</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#_1-初识前后端通信" class="sidebar-link">1.初识前后端通信</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#_2-前后端通信的过程与概念解释" class="sidebar-link">2.前后端通信的过程与概念解释</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#_3-前后端的通信方式" class="sidebar-link">3.前后端的通信方式</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#_4-初识http" class="sidebar-link">4.初识HTTP</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#_5-http-报文" class="sidebar-link">5.HTTP 报文</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#_6-http方法" class="sidebar-link">6.HTTP方法</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#_7-get和-post方法的对比" class="sidebar-link">7.GET和 POST方法的对比</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#_8-http状态码" class="sidebar-link">8.HTTP状态码</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html#课程总结" class="sidebar-link">课程总结</a></li></ul></li><li><a href="/./guide/notes/js/32-本地存储.html" class="sidebar-link">31-本地存储</a></li><li><a href="/./guide/notes/js/33-ajax.html" class="sidebar-link">32-ajax</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="课程简介"><a href="#课程简介" class="header-anchor">#</a> 课程简介</h2> <p><strong>前后端通信</strong></p> <blockquote><p>初识前后端通信</p> <p>前后端通信的过程与概念解释</p> <p>前后端的通信方式</p></blockquote> <p><strong>HTTP 协议</strong></p> <blockquote><p>初识HTTP</p> <p><strong>HTTP报文</strong></p> <p>HTTP方法</p> <p><strong>GET和POST方法的对比</strong></p> <p>HTTP状态码</p></blockquote> <h2 id="_1-初识前后端通信"><a href="#_1-初识前后端通信" class="header-anchor">#</a> 1.初识前后端通信</h2> <ul><li><p>前后端通信是什么</p></li> <li><p>后端向前端发送数据</p></li> <li><p>前端向后端发送数据</p></li></ul> <h3 id="_1-前后端通信是什么"><a href="#_1-前后端通信是什么" class="header-anchor">#</a> 1.前后端通信是什么</h3> <blockquote><p>前端和后端数据交互的过程</p> <p>浏览器和服务器之间数据交互的过程</p></blockquote> <h3 id="_2-后端向前端发送数据"><a href="#_2-后端向前端发送数据" class="header-anchor">#</a> 2.后端向前端发送数据</h3> <blockquote><p>访问页面</p></blockquote> <p><a href="https://imgchr.com/i/BTt6Ds" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/08/BTt6Ds.png" alt="BTt6Ds.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_3-前端向后端发送数据"><a href="#_3-前端向后端发送数据" class="header-anchor">#</a> 3.前端向后端发送数据</h3> <blockquote><p>用户注册</p></blockquote> <p><a href="https://imgchr.com/i/BTNkIP" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/08/BTNkIP.png" alt="BTNkIP.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_2-前后端通信的过程与概念解释"><a href="#_2-前后端通信的过程与概念解释" class="header-anchor">#</a> 2.前后端通信的过程与概念解释</h2> <ul><li><p>前后端通信的过程</p></li> <li><p>概念解释</p></li></ul> <h3 id="_1-前后端通信的过程"><a href="#_1-前后端通信的过程" class="header-anchor">#</a> 1.前后端通信的过程</h3> <blockquote><p>前后端的通信是在‘请求-响应’中完成的</p></blockquote> <p><a href="https://imgchr.com/i/DHvYUH" target="_blank" rel="noopener noreferrer"><img src="https://s3.ax1x.com/2020/12/04/DHvYUH.png" alt="DHvYUH.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://imgchr.com/i/DbeMRK" target="_blank" rel="noopener noreferrer"><img src="https://s3.ax1x.com/2020/12/04/DbeMRK.png" alt="DbeMRK.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_2-概念解释"><a href="#_2-概念解释" class="header-anchor">#</a> 2.概念解释</h3> <blockquote><p>前端：浏览器端</p> <p>客户端：只要能和服务器通信的就叫客户端</p> <p>​				命令行工具
​</p> <p>后端：服务器端</p></blockquote> <h2 id="_3-前后端的通信方式"><a href="#_3-前后端的通信方式" class="header-anchor">#</a> 3.前后端的通信方式</h2> <ul><li><p>使用浏览器访问网页</p></li> <li><p>HTML的标签</p></li> <li><p>Ajax和Fetch</p></li></ul> <h3 id="_1-使用浏览器访问网页"><a href="#_1-使用浏览器访问网页" class="header-anchor">#</a> 1.使用浏览器访问网页</h3> <blockquote><p>在浏览器地址栏输入网址，按下回车</p></blockquote> <h3 id="_2-html-的标签"><a href="#_2-html-的标签" class="header-anchor">#</a> 2.HTML 的标签</h3> <blockquote><p>浏览器在解析 HTML 标签的时候，遇到一些特殊的标签，会再次向服务器发送请求</p> <p><strong>link / img / script / iframe</strong></p></blockquote> <p><a href="https://imgchr.com/i/BTUW1U" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/08/BTUW1U.png" alt="BTUW1U.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://imgchr.com/i/BTaF9f" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/08/BTaF9f.png" alt="BTaF9f.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求</strong></p> <blockquote><p>a/form</p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://www.bilibili.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>bilibili一下<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://www.shiguangkey.com/<span class="token punctuation">&quot;</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>POST<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>密码<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>注册<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="_3-ajax-和-fetch"><a href="#_3-ajax-和-fetch" class="header-anchor">#</a> 3.Ajax 和 Fetch</h3> <h2 id="_4-初识http"><a href="#_4-初识http" class="header-anchor">#</a> 4.初识HTTP</h2> <ul><li><p>HTTP是什么</p></li> <li><p>HTTP请求响应的过程</p></li></ul> <h3 id="_1-http-是什么"><a href="#_1-http-是什么" class="header-anchor">#</a> 1.HTTP 是什么</h3> <blockquote><p>HyperText Transfer Protocol  超文本传输协议</p> <p>HTML：超文本标记语言</p> <p><strong>超文本：原先一个个单一的文本，通过超链接将其联系起来。由原先的单一的文本变成了可无限延伸、扩展的超级文本、立体文本</strong></p> <p>HTML、JS、CSS、图片、字体、音频、视频等等文件，都是通过 HTTP（超文本传输协议） 在服务器和浏览器之间传输</p> <p>每一次前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应</p> <p>HTTP 是一个请求-响应协议</p></blockquote> <h3 id="_2-http-请求响应的过程"><a href="#_2-http-请求响应的过程" class="header-anchor">#</a> 2.HTTP 请求响应的过程</h3> <blockquote><p>https://www.bilibili.com</p></blockquote> <p><a href="https://imgchr.com/i/BTdoJx" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/08/BTdoJx.png" alt="BTdoJx.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_5-http-报文"><a href="#_5-http-报文" class="header-anchor">#</a> 5.HTTP 报文</h2> <ul><li><p>HTTP报文是什么</p></li> <li><p><strong>HTTP报文格式</strong></p></li></ul> <h3 id="_1-http-报文是什么"><a href="#_1-http-报文是什么" class="header-anchor">#</a> 1.HTTP 报文是什么</h3> <blockquote><p>浏览器向服务器发送请求时，请求本身就是信息，叫请求报文</p> <p>服务器向浏览器发送响应时传输的信息，叫响应报文</p></blockquote> <h3 id="_2-http-报文格式"><a href="#_2-http-报文格式" class="header-anchor">#</a> 2.HTTP 报文格式</h3> <blockquote><p>请求</p> <p>请求头：起始行+首部</p> <p>请求体</p> <p>响应</p> <p>响应头：起始行+首部</p> <p>响应体</p></blockquote> <p><a href="https://imgchr.com/i/BTwXcT" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/08/BTwXcT.png" alt="BTwXcT.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://imgchr.com/i/B7bX59" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/09/B7bX59.png" alt="B7bX59.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>GET 请求，没有请求体，数据通过请求头携带</p> <p>POST 请求，有请求体，数据通过请求体携带</p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://www.baidu.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>get<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>密码<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>注册<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://www.baidu.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>post<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>密码<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>注册<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="_6-http方法"><a href="#_6-http方法" class="header-anchor">#</a> 6.HTTP方法</h2> <ul><li>常用的HTTP方法</li> <li>HTTP方法的语义</li> <li>RESTful接口设计</li></ul> <h3 id="_1-常用的-http-方法"><a href="#_1-常用的-http-方法" class="header-anchor">#</a> 1.常用的 HTTP 方法</h3> <blockquote><p>浏览器<strong>发送请求时采用的方法</strong>，和响应无关</p> <p><strong>GET、POST、PUT、DELETE</strong></p> <p>用来定义对于资源采取什么样的操作的，有各自的语义</p></blockquote> <h3 id="_2-http-方法的语义"><a href="#_2-http-方法的语义" class="header-anchor">#</a> 2.HTTP 方法的语义</h3> <blockquote><p>GET 获取数据   ===&gt; (  获取资源（文件）)</p> <p>POST 创建数据      ====&gt; 注册</p> <p>PUT 更新数据    ===&gt;  修改个人信息，修改密码</p> <p>DELETE 删除数据  ===&gt; 删除一条评论</p> <p><strong>总结: 增删改查</strong></p> <p>这些方法虽然有各自的语义，但是并不是强制性的</p></blockquote> <h3 id="_3-restful-接口设计"><a href="#_3-restful-接口设计" class="header-anchor">#</a> 3.RESTful 接口设计</h3> <blockquote><p>一种接口设计风格，充分利用 HTTP 方法的语义</p></blockquote> <p><strong>通过用户 ID 获取个人信息，使用 GET 方法</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>https://www.baidu.com/api/http/getUser?id=1
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>注册新用户，使用 POST 方法</strong></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>https://www.baidu.com/api/http/addUser
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>修改一个用户，使用 POST 方法</strong></p> <div class="language- line-numbers-mode"><pre class="language-text"><code> https://www.baidu.com/api/http/modifyUser
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>删除一个用户，使用 POST 方法</strong></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>https://www.baidu.com/api/http/deleteUser
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>使用RESTful 接口设计</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//GET</span>
<span class="token literal-property property">https</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>baidu<span class="token punctuation">.</span>com<span class="token operator">/</span>api<span class="token operator">/</span>http<span class="token operator">/</span>user<span class="token operator">?</span>id<span class="token operator">=</span><span class="token number">1</span>

<span class="token comment">//POST</span>
<span class="token literal-property property">https</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>baidu<span class="token punctuation">.</span>com<span class="token operator">/</span>api<span class="token operator">/</span>http<span class="token operator">/</span>user

<span class="token comment">//PUT</span>
<span class="token literal-property property">https</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>baidu<span class="token punctuation">.</span>com<span class="token operator">/</span>api<span class="token operator">/</span>http<span class="token operator">/</span>user

<span class="token comment">//DELETE</span>
<span class="token literal-property property">https</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>baidu<span class="token punctuation">.</span>com<span class="token operator">/</span>api<span class="token operator">/</span>http<span class="token operator">/</span>user
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="_7-get和-post方法的对比"><a href="#_7-get和-post方法的对比" class="header-anchor">#</a> 7.GET和 POST方法的对比</h2> <ul><li>语义</li> <li><strong>发送数据</strong></li> <li>缓存</li> <li><strong>安全性</strong></li></ul> <h3 id="_1-语义"><a href="#_1-语义" class="header-anchor">#</a> 1.语义</h3> <blockquote><p>GET：获取数据</p> <p>POST：创建数据</p></blockquote> <h3 id="_2-发送数据"><a href="#_2-发送数据" class="header-anchor">#</a> 2.发送数据</h3> <blockquote><p>GET 通过地址在请求头中携带数据</p> <p>能携带的数据量和地址的长度有关系，一般最多就几K</p></blockquote> <blockquote><p>POST 既可以通过地址在请求头中携带数据，也可以通过</p> <p>请求体携带数据</p> <p>能携带的数据量理论上是无限的</p></blockquote> <p><strong>携带少量数据，可以使用 GET 请求，大量的数据可以使用 POST 请求</strong></p> <h3 id="_3-缓存"><a href="#_3-缓存" class="header-anchor">#</a> 3.缓存</h3> <blockquote><p>GET 可以被缓存，POST 不会被缓存</p></blockquote> <h3 id="_4-安全性"><a href="#_4-安全性" class="header-anchor">#</a> 4.安全性</h3> <blockquote><p>GET 和 POST 都不安全</p> <p>发送密码或其他敏感信息时不要使用 GET，主要是避免直接被他人窥屏或通过历史记录找到你的密码</p></blockquote> <h2 id="_8-http状态码"><a href="#_8-http状态码" class="header-anchor">#</a> 8.HTTP状态码</h2> <ul><li>HTTP状态码是什么</li> <li>HTTP状态码的语义</li></ul> <h3 id="_1-http-状态码是什么"><a href="#_1-http-状态码是什么" class="header-anchor">#</a> 1.HTTP 状态码是什么</h3> <blockquote><p>定义服务器对请求的处理结果，是服务器返回的</p></blockquote> <h3 id="_2-http-状态码的语义"><a href="#_2-http-状态码的语义" class="header-anchor">#</a> 2.HTTP 状态码的语义</h3> <blockquote><p><strong>100~199 消息</strong>：代表请求已被接受，需要继续处理</p> <p>​	websocket 全双工通信的协议</p> <p><strong>200~299 成功</strong></p> <p>**300~399 重定向 **</p> <p>301 Moved Permanently</p> <p>302 Move Temporarily</p> <p>304 Not Modified</p> <p>http://www.baidu.com/</p> <p>https://www.baidu.com/</p> <p><strong>400~499 请求错误</strong>  404 Not Found</p> <p><strong>500~599 服务器错误</strong>  500 Internal Server Error</p></blockquote> <h2 id="课程总结"><a href="#课程总结" class="header-anchor">#</a> 课程总结</h2> <h3 id="前后端通信"><a href="#前后端通信" class="header-anchor">#</a> 前后端通信</h3> <p><a href="https://imgchr.com/i/DHvYUH" target="_blank" rel="noopener noreferrer"><img src="https://s3.ax1x.com/2020/12/04/DHvYUH.png" alt="DHvYUH.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="前后端的通信方式"><a href="#前后端的通信方式" class="header-anchor">#</a> 前后端的通信方式</h3> <blockquote><p>使用浏览器访问网页</p> <p>link、img. script、a、form 等HTML的标签</p> <p>Ajax和Fetch</p></blockquote> <h3 id="http协议"><a href="#http协议" class="header-anchor">#</a> HTTP协议</h3> <blockquote><p>HTML、JS、CSS、图片等文件，都是通过HTTP在服务器和浏览器之间传输</p> <p>HTTP是一个请求-响应协议</p></blockquote> <h3 id="http请求响应的过程"><a href="#http请求响应的过程" class="header-anchor">#</a> HTTP请求响应的过程</h3> <p><a href="https://imgchr.com/i/BTdoJx" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/08/BTdoJx.png" alt="BTdoJx.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="http-报文"><a href="#http-报文" class="header-anchor">#</a> HTTP 报文</h3> <p><a href="https://imgchr.com/i/BTwXcT" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/08/BTwXcT.png" alt="BTwXcT.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="http方法"><a href="#http方法" class="header-anchor">#</a> HTTP方法</h3> <blockquote><p>GET 获取数据</p> <p>PUT更新数据</p> <p>POST创建数据</p> <p>DELETE删除数据</p></blockquote> <h3 id="get和post方法的对比"><a href="#get和post方法的对比" class="header-anchor">#</a> GET和POST方法的对比</h3> <blockquote><p>GET 表示获取数据，POST 表示创建数据</p> <p>GET通过地址在请求头中携带数据</p> <p>POST既可以通过地址在请求头中携带数据，也可以通过请求体携带数据</p> <p>GET可以被缓存，POST不会被缓存</p> <p>发送密码或其他敏感信息时不要使用GET</p></blockquote> <h3 id="http状态码"><a href="#http状态码" class="header-anchor">#</a> HTTP状态码</h3> <blockquote><p>100~199消息:代表请求已被接受，需要继续处理</p> <p>200~299成功</p> <p>300~399重定向</p> <p>400~499请求错误</p> <p>500~599服务器错误</p></blockquote></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/js/30-Babel.html" class="prev">
        29-Babel
      </a></span> <span class="next"><a href="/./guide/notes/js/32-本地存储.html">
        31-本地存储
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/69.f5f39d50.js" defer></script>
  </body>
</html>
